<template>
	<view :style="theme">
		<view class="head">
			<u-search shape="round" placeholder="搜索" v-model="keyword" clearabled :show-action="false"
				@search="searchBtn" @clickIcon="searchBtn">
			</u-search>
		</view>
		<view class="cotent">
			<view class="num">团员人数：<text class="ztColor">{{num}}</text></view>
			<checkbox-group v-model="result" placement="column" @change="checkboxChange">
				<label class="flex-cb card" v-for="(item, index) in list" :key="index">
					<checkbox v-if="del && item.type !== '1'" :name="item.memberId" :value="item.memberId"
						class="checkbox-backgroun-color checkbox-round"
						:checked="result.includes(String(item.memberId))" />
					<view class="cont">
						<view class="flex-cb member">
							<view class="box_flex flex-c">
								<view class="touxian">
									<image :src="item.faceImg? item.faceImg :imgHost+'/user.png'"></image>
									<view v-if="item.type == '1'">管理</view>
								</view>
								<view class="right">
									<view class="name">{{item.name}}<text>@{{item.cardType}}</text></view>
									<view class="tel">{{item.phone}}</view>
								</view>
							</view>
							<view v-if="item.type == 1">账户余额：¥{{item.amot}}</view>
							<view v-if="item.type != 1">转账金额：¥{{item.transferAmot}}</view>
						</view>
						<view class="flex-cb time">
							<view>{{item.creatTime}}</view>
							<view v-if="item.type !== '1'" class="zhuanzhan" @click="zhuanzhan(item)">转账</view>
						</view>
					</view>
				</label>
			</checkbox-group>
			<u-loadmore v-if="end && list.length >= 10" :status="status" line />
		</view>
		<view v-if="del" class="bottomState flex-cb">
			<checkbox class="checkbox-backgroun-color checkbox-round" :checked="checkAll?true:false" shape="square"
				@click="handleCheckAll">全选</checkbox>
			<view class="flex">
				<view class="registerNow" @click="$noMultipleClicks(xybBtn)">确认删除</view>
				<view class="btns ml32" @click="hideDel">取消删除</view>
			</view>
		</view>
		<view v-if="!del" class="bottomState bottomStates">
			<view v-if="listLength>0" class="btns" @click="showDel">删除</view>
			<view class="btn ml32" @click="addBtn">添加</view>
		</view>
		<view v-if="list.length === 0" class="no-order">
			<image :src="imgHost+'/default_nodata.png'"></image>
			<view>暂无数据</view>
		</view>
		<u-popup round :show="show" mode="center" round="20rpx">
			<view class="pwd_box">
				<view class="pwd_box_title">{{poptype === 1?'添加会员':poptype === 2?'转账金额':'支付密码'}}</view>
				<view v-if="poptype==1" class="pwd_box_input">
					<input placeholder="请输入新增手机号" v-model="addtel" maxlength="11" type="number" />
				</view>
				<view v-if="poptype==2" class="pwd_box_input">
					<input placeholder="请输入转账金额,最多2位小数" v-model="money" maxlength="11" type="digit" />
				</view>
				<view v-if="poptype==2" class="pwd_box_input" style="margin-top: 20rpx">
					<input placeholder="请输入,默认手机号后六位" v-model="pwd" maxlength="6" type="password" />
				</view>
				<view v-if="poptype==2" class="wjmm" @click="jump2('/pages/member/password')">
					<text>
						<!-- 支付密码默认为手机号后六位 -->
					</text>
					<text>忘记密码?</text>
				</view>
				<view class="pwd_box_footer">
					<view class="pwd_box_footer_qx" @click="onClose">取消</view>
					<view class="pwd_box_footer_qd" @click="$noMultipleClicks(huiyuanZF)">确定</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				noClick: true,
				keyword: '',
				list: [],
				page: 1,
				num: 0,
				end: false,
				firstQueryTime: '',
				status: 'nomore',
				del: false,
				show: false,
				addtel: '',
				money: '',
				pwd: '',
				result: [],
				checkAll: false,
				poptype: 1,
				cardNo: '',
				memberId: '',
				listLength: 0
			}
		},
		onLoad() {
			this.searchBtn()
		},
		methods: {
			jump(url, params, a) {
				this.$app.jump(url, params, a);
			},
			jump2(url, params, a) {
				this.$app.jump2(url, params, a);
			},
			checkboxChange(e) {
				this.result = e.detail.value
				if (this.result.length === this.listLength) {
					this.checkAll = true
				} else {
					this.checkAll = false
				}
			},
			handleCheckAll() {
				if (this.checkAll) {
					this.checkAll = false
					this.result = []
				} else {
					let arr = []
					let list = this.list
					list.forEach((item, index) => {
						if (item.type != 1) {
							arr.push(item.memberId)
						}
					})
					this.result = arr
					this.checkAll = true
				}
			},
			hideDel() {
				this.del = false
				this.checkAll = false
				this.result = []
			},
			showDel() {
				this.del = true
				this.checkAll = false
				this.result = []
			},
			searchBtn() {
				this.firstQueryTime = this.$app.firstQueryTime()
				this.list = [];
				this.page = 1;
				this.end = false;
				this.getList()
			},
			getList() {
				this.hideDel()
				this.$app.ajax({
					data: {
						pagination: {
							firstQueryTime: this.firstQueryTime,
							page: this.page,
							rows: 10
						},
						param: {
							venueId: this.venueId,
							member: this.keyword,
							teamId: this.userInfo.teamId
						}
					},
					api: this.$api.listWXTeamMember()
				}).then((res) => {
					if (res.errorCode === '000000') {
						this.num = res.totalCount || 0
						if (!res.recordList || res.recordList.length < 10) {
							this.end = true
						}
						if (res.recordList) {
							this.list = this.list.concat(res.recordList)
						}
						let listLength = 0
						this.list.forEach(e=> {
							if(e.type!=1) {
								listLength += 1
							}
						})
						this.listLength = listLength
					}
				}).catch(() => {})
			},
			xybBtn() {
				if (!this.result || this.result.length == 0) {
					this.$app.showToast('请先选择团员')
					return false
				}
				this.$app.ajax({
					data: {
						param: {
							venueId: this.venueId,
							teamId: this.userInfo.teamId,
							memberId: this.result,
						}
					},
					api: this.$api.deleteTeamMember()
				}).then((res) => {
					if (res.errorCode == '000000') {
						this.$app.showToast('删除成功')
						this.hideDel()
						this.searchBtn()
					}
				}).catch(() => {})
			},
			huiyuanZF() {
				let that = this
				let type = this.poptype
				let regex = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/
				let regexb = /(^1[3|4|5|7|8][0-9]\d{4,8}$)/
				if (type == 1) {
					if (!this.addtel) return this.$app.showToast('请输入手机号')
					if (!regexb.test(this.addtel)) return this.$app.showToast('请填写正确的手机号')
					this.$app.ajax({
						data: {
							param: {
								venueId: this.venueId,
								phone: this.addtel
							}
						},
						api: this.$api.getMember()
					}).then((res) => {
						if (res.errorCode == '000000') {
							let obj = res.record
							that.$app.ajax({
								data: {
									param: {
										venueId: that.venueId,
										phone: that.addtel,
										teamId: that.userInfo.teamId,
										memberId: obj.id
									}
								},
								api: that.$api.addTeamMember()
							}).then((resb) => {
								if (resb.errorCode == '000000') {
									that.show = false
									that.$app.showToast('添加成功')
									that.keyword = ''
									that.searchBtn()
								}
							}).catch(() => {})
						}
					}).catch(() => {})
				} else {
					if (this.userInfo.flag != '1') {
						this.$app.showToast('请先设置支付密码')
						setTimeout(() => {
							this.jump2('/pages/member/password')
						}, 500)
						return false
					}
					let priceJudgeResult = regex.test(this.money)
					if (!this.money) return this.$app.showToast('请输入转账金额')
					if (!priceJudgeResult) return this.$app.showToast('请填写正确的转账金额')
					if (!this.pwd) return  this.$app.showToast('请输入支付密码')
					if (this.pwd.length !=6) return this.$app.showToast('请输入正确的支付密码')
					this.$app.ajax({
						data: {
							param: {
								venueId: this.venueId,
								teamId: this.userInfo.teamId,
								money: this.money,
								inCardNo: this.cardNo,
								payPw: this.pwd,
								remarks: '团体转账',
							}
						},
						api: this.$api.memberTeamTransferAccountsApp()
					}).then((res) => {
						if (res.errorCode == '000000') {
							this.show = false
							this.$app.showToast('转账成功')
							this.keyword = ''
							this.searchBtn()
						}
					}).catch(() => {})
				}

			},
			addBtn() {
				this.poptype = 1
				this.addtel = ''
				this.show = true
			},
			zhuanzhan(e) {
				this.poptype = 2
				this.cardNo = e.cardNo
				this.memberId = e.id
				this.pwd = ''
				this.money = ''
				this.show = true
			},
			onClose() {
				this.show = false
			},
			reachBottom() {
				if (!this.end) {
					this.page += 1;
					this.getList();
				}
			},
			// 触底加载更多数据
			onReachBottom(e) {
				this.reachBottom()
			}

		}

	}
</script>
<style scoped lang="scss">
	.head {
		background-color: #fff;
		padding: 30rpx;
		box-sizing: border-box;
	}

	.box_switch {
		padding: 20rpx 30rpx;
		margin: 30rpx;
		box-sizing: border-box;
		background: #ffffff;
		border-radius: 16rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: sticky;
		top: 0;
		left: 0;
		right: 0;
		z-index: 9;
	}

	.num {
		font-weight: 400;
		color: #333333;
		margin-top: 30rpx;
		padding: 0 30rpx;
		font-size: 28rpx;
		line-height: 1.5;
	}

	.box_switch_right {
		flex: 1;
	}

	.box_switch_left_imgb {
		width: 28rpx;
		margin-right: 20rpx;
		height: 28rpx;
	}

	.cotent {
		padding-bottom: 120rpx;
	}

	.card {
		width: 690rpx;
		box-sizing: border-box;
		background-color: #fff;
		margin: 30rpx auto 0;
		border-radius: 16rpx;
		padding: 30rpx;
	}

	.cont {
		flex: 1;
		line-height: 1.5;
	}

	.cont .time {
		margin-top: 10rpx;
		color: #666666;
		text-align: left;
		font-size: 24rpx;
	}

	.zhuanzhan {
		width: 152rpx;
		line-height: 50rpx;
		border-radius: 26rpx;
		border: 1px solid $color;
		font-weight: 400;
		text-align: center;
		color: $color;
	}

	.cont .member {
		color: #333333;
		font-size: 22rpx;
	}

	.box_flex .touxian {
		width: 72rpx;
		height: 72rpx;
		margin-right: 30rpx;
		position: relative;
	}

	.box_flex .touxian view {
		width: 52rpx;
		line-height: 26rpx;
		background: $color;
		border-radius: 4rpx;
		font-size: 18rpx;
		text-align: center;
		position: absolute;
		left: 10rpx;
		bottom: -10rpx;
		color: #fff;
		z-index: 2;
	}

	.box_flex image {
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;
		width: 72rpx;
		height: 72rpx;
		border-radius: 50%;
	}

	.right {
		flex: 1;
	}

	.name {
		font-weight: 500;
		color: #222222;
		font-size: 30rpx;
		line-height: 1.5;
		margin-bottom: 10rpx;
	}

	.name text {
		font-weight: 400;
		color: $moreColor;
		font-size: 22rpx;
		margin-left: 20rpx;
	}

	.tel {
		color: #999999;
		line-height: 1.5;
		font-size: 24rpx;
	}

	.ul {
		padding-bottom: 120rpx;
	}

	.bottomState {
		width: 100%;
		padding: 16rpx 30rpx;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		box-sizing: border-box;
		overflow: hidden;
	}

	.bottomStates {
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.registerNow {
		height: 68rpx;
		width: 180rpx;
		text-align: center;
		color: #fff;
		background-color: $color;
		font-size: 28rpx;
		border-radius: 34rpx;
		line-height: 68rpx;
	}

	.btn {
		height: 68rpx;
		width: 180rpx;
		text-align: center;
		color: $color;
		border: 1px solid $color;
		font-size: 28rpx;
		border-radius: 34rpx;
		line-height: 68rpx;
	}

	.btns {
		height: 68rpx;
		width: 180rpx;
		text-align: center;
		color: #666666;
		border: 1px solid #666666;
		font-size: 28rpx;
		border-radius: 34rpx;
		line-height: 68rpx;
	}
</style>
